/* foldPanel.scss */
@charset "UTF-8";
@import "common/var";
@import "mixins/mixins";

@include b(LeftFoldPanel) {
    position: absolute;
    z-index: 999;
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: all 0.35s ease-in-out;

    &-content {
        width: 20vw;
        height: calc(100vh - #{$--height-navbar} - 20px);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    &-control {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px;
        cursor: pointer;
        color: #ffffff;
        background: linear-gradient(
        0deg,
        rgba($--color-bgColor, 0.6),
        rgba($--color-bgColor, 0.35)
        );
        border: 2px solid rgba($--color-info, 0.5);
        border-left: none;
        border-radius: 0 4px 4px 0;
    }
}

@include b(RightFoldPanel) {
    position: absolute;
    right: 10px;
    z-index: 999;
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: all 0.35s ease-in-out;
    
    &-content {
        width: 20vw;
        height: calc(100vh - #{$--height-navbar} - 20px);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    
    &-control {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px;
        cursor: pointer;
        color: #ffffff;
        background: linear-gradient(
        0deg,
        rgba($--color-bgColor, 0.6),
        rgba($--color-bgColor, 0.35)
        );
        border: 2px solid rgba($--color-info, 0.5);
        border-right: none;
        border-radius: 4px 0 0 4px;
    }
}